<template>
	<view>
		<u-navbar :safeAreaInsetTop="true" title=" " autoBack :bgColor="'rgba(255,255,255,'+opc+')'" placeholder>

		</u-navbar>
		<image src="/static/yq/bg.png" class="bg" mode=""></image>
		<u-modal :show="show" title="发送您的专属邀请" :content='content' @confirm="confirm" confirmText="复制并关闭"></u-modal>
		<view class="pagecon" style="overflow: auto;">
			<image src="/static/yq/title.png" class="title" mode=""></image>
			<view class="tip">
				精彩好礼等你拿不停
			</view>
			<view class="hbbox">
				<image src="/static/yq/hb.png" class="hb" mode=""></image>
				<view class="hb__con">
					<view class="hb__title">
						邀请规则
					</view>
					<view class="hb__tip">
						邀请好友成功奖励
					</view>
					<view class="hb__price">
						20 <text style="font-size: 28rpx;">积分</text>
					</view>
					<view class="hb__xf">
						邀请好友消费奖励
					</view>
					<view class="btn" @click="show=true;">

					</view>
				</view>
			</view>
			<view class="list">
				<view class="" style="position: relative;">
					<!-- <image src="/static/yq/listtop.png" class="list__title" mode=""></image>
					<view class="tab">
						<view class="tab__item active" style="color: #323232;">
							一级好友
						</view>
						<view class="tab__item">
							二级好友
						</view>
					</view> -->
					<view class="tab" style="background-color: white;border-radius: 30rpx 30rpx 0 0;">
						<view :class="current ==0?'tab__item active':'tab__item'" style="color: #323232;"
							@click="current=0">
							一级好友
						</view>
						<view :class="current ==1?'tab__item active':'tab__item'" style="color: #323232;"
							@click="current=1">
							二级好友
						</view>
					</view>
				</view>
				<view class="" style="background-color: #fff;" v-if="current==0">
					<u-empty mode="data" icon="http://jie.fuliaoxx.com/uploads/20250921/a97ed149994da025feb57f6fadc5ad44.jpg" v-if="child.length==0">
					</u-empty>
					<view class="list__item" v-for="(item,index) in child" :key="index">
						<!-- <image src="/static/cao/tx.png" class="list__tx" mode="aspectFill"></image> -->
						<u-avatar :src="item.avatar" style="margin-right: 20rpx;"></u-avatar>
						<view class="" style="flex: 1;">
							<view class="u-flex u-flex-y-center u-flex-between"
								style="margin-bottom: 10rpx;margin-top: 10rpx;">
								<view class="list__item__name">
									{{item.username}}
								</view>
								<view class="list__item__price">
									+20
								</view>
							</view>
							<view class="u-flex u-flex-y-center u-flex-between">
								<view class="list__item__time">
									{{formatTimestamp(item.jointime)}}
								</view>
								<view class="list__item__text">
									邀请收益
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="" style="background-color: #fff;" v-else>
					<u-empty mode="data" icon="http://jie.fuliaoxx.com/uploads/20250921/a97ed149994da025feb57f6fadc5ad44.jpg" v-if="son.length==0">
					</u-empty>
					<view class="list__item" v-for="(item,index) in son" :key="index">
						<image src="/static/cao/tx.png" class="list__tx" mode="aspectFill"></image>
						<view class="" style="flex: 1;">
							<view class="u-flex u-flex-y-center u-flex-between"
								style="margin-bottom: 10rpx;margin-top: 10rpx;">
								<view class="list__item__name">
									{{item.username}}
								</view>
								<view class="list__item__price">
									+20
								</view>
							</view>
							<view class="u-flex u-flex-y-center u-flex-between">
								<view class="list__item__time">
									{{formatTimestamp(item.jointime)}}
								</view>
								<view class="list__item__text">
									邀请收益
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userInfo,
		myChild,
		mySon
	} from "@/request/api/my.js"
	export default {
		data() {
			return {
				list: ['一级好友', '二级好友'],
				opc: 0,
				list4: [{
						name: '一级好友'
					},
					{
						name: '二级好友'
					},
				],
				show: false,
				content: "",
				current: 0,

				child: [],
				son: []
			};
		},
		onPageScroll(e) {
			if (e.scrollTop == 0) {
				this.opc = 0
			} else {
				this.opc = 1
			}
		},
		onShow() {
			userInfo().then(res => {
				this.content = "http://jie.fuliaoxx.com/loginH5/#/?salt=" + res.data.salt;
			})
			myChild().then(res => {
				console.log(res)
				this.child = res.data
			})
			mySon().then(res => {
				console.log(res)
				this.son = res.data
			})
		},
		methods: {
			formatTimestamp(timestamp) {
				// 创建 Date 对象
				const date = new Date(timestamp * 1000); // 将时间戳转换为毫秒
				// 获取年份、月份、日期、小时、分钟、秒
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
				const day = String(date.getDate()).padStart(2, '0');
				const hour = String(date.getHours()).padStart(2, '0');
				const minute = String(date.getMinutes()).padStart(2, '0');
				const second = String(date.getSeconds()).padStart(2, '0');
				// 返回格式化的日期时间字符串
				return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
			},
			confirm() {
				let that = this;
				uni.setClipboardData({
					data: this.content,
					success: function() {
						uni.$u.toast('复制成功')
						that.show = false;
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fde8e5;
	}

	.bg {
		width: 750rpx;
		height: 1591rpx;
		position: fixed;
		top: 0;
		left: 0;
	}

	.title {
		width: 645rpx;
		height: 92rpx;
		margin-left: 55rpx;
	}

	.tip {
		width: 383rpx;
		height: 66rpx;
		background: #F5B935;
		border-radius: 33rpx 33rpx 33rpx 33rpx;
		font-family: OPPOSans, OPPOSans;
		font-weight: normal;
		font-size: 35rpx;
		color: #FFFFFF;
		line-height: 35rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 33rpx 0 0 193rpx;
	}

	.hbbox {
		width: 750rpx;
		height: 1127rpx;
		margin-top: -225rpx;
		position: relative;
	}

	.hb {
		width: 750rpx;
		height: 1127rpx;
		position: absolute;
		top: 0;
		left: 0;

		&__con {
			position: absolute;
			width: 750rpx;
			height: 1127rpx;
		}

		&__title {
			position: absolute;
			bottom: 701rpx;
			text-align: center;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #853A33;
			line-height: 30rpx;
			width: 100%;
		}

		&__tip {
			width: 100%;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 30rpx;
			text-align: center;
			position: absolute;
			bottom: 588rpx;
		}

		&__price {
			font-family: DINNextLTPro, DINNextLTPro;
			font-weight: bold;
			font-size: 105rpx;
			color: #FFFFFF;
			line-height: 75rpx;
			width: 100%;
			text-align: center;
			position: absolute;
			bottom: 447rpx;

			&::before {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 800;
				font-size: 58rpx;
				color: #FFFFFF;
				line-height: 58rpx;
				content: "+";
			}
		}

		&__xf {
			width: 342rpx;
			height: 82rpx;
			background: rgba(255, 255, 255, 0.24);
			box-shadow: 3rpx 0rpx 7rpx 0rpx rgba(255, 255, 255, 0.24);
			border-radius: 33rpx 33rpx 33rpx 33rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 30rpx;
			text-shadow: 3px 0px 7px #FF4B3A;
			margin-left: 205rpx;
			position: absolute;
			bottom: 341rpx;

		}

	}

	.list {
		width: 665rpx;
		height: 376rpx;
		margin: 0rpx 0 0 43rpx;

		&__title {
			width: 665rpx;
			height: 104rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		.tab {
			height: 104rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			position: relative;

			&__item {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 800;
				font-size: 29rpx;
				color: #FEFDFD;
				line-height: 36rpx;
				width: 50%;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;

				&::after {
					width: 36rpx;
					height: 12rpx;
					background: #ffffff;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					content: "";
					display: inline-block;
				}
			}

			.active {
				display: flex;
				flex-direction: column;
				align-items: center;

				&::after {
					width: 36rpx;
					height: 12rpx;
					background: #FE5546;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					content: "";
					display: inline-block;
				}
			}
		}

		&__item {
			padding: 0 30rpx 30rpx;
			display: flex;
			align-items: center;

			&__name {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 27rpx;
				color: #181818;
				line-height: 36rpx;
			}

			&__time {
				font-family: DINNextLTPro;
				font-weight: 500;
				font-size: 25rpx;
				color: #929292;
				line-height: 25rpx;
			}

			&__price {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 800;
				font-size: 34rpx;
				color: #FF4D30;
				line-height: 34rpx;
			}

			&__text {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #929292;
				line-height: 20rpx;
			}
		}

		&__tx {
			width: 100rpx;
			height: 100rpx;
			background: #45C47B;
			border-radius: 50%;
			margin-right: 30rpx;
		}

	}

	.btn {
		position: absolute;
		bottom: 101rpx;
		width: 420rpx;
		height: 150rpx;
		margin-left: 165rpx;
	}
</style>